<template>
<div>
  <el-card>
    <el-row>
    <el-table
        :data="tableData"
        stripe
        max-height="500"
        style="width: 100%">
      <el-table-column
          align="center"
          prop="picture"
          label="图书"
          width="200">
        <template slot-scope="scope">
          <img :src="scope.row.picture" style="width: 80px;height: 80px;">
        </template>
      </el-table-column>
      <el-table-column
          prop="name"
          label="书名"
          width="140">
      </el-table-column>
      <el-table-column
          prop="lenddate"
          label="借阅时间"
          width="160">
        <template slot-scope="scope">
          {{ formatDate(scope.row.lenddate) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="backdate"
          label="还书时间"
          width="160">
        <template slot-scope="scope">
          {{ formatDate(scope.row.backdate) }}
        </template>
      </el-table-column>
      <el-table-column
          prop="backtype"
          label="还书类型"
          width="120">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.backtype === 0 ?'success':(scope.row.backtype===1? 'primary' :(scope.row.backtype===2? 'info' : (scope.row.backtype===3? 'warning' : 'danger')))"
              disable-transition>
            {{ scope.row.backtype === 0 ?'在借中':(scope.row.backtype===1? '正常还书': (scope.row.backtype===2? '延迟还书': (scope.row.backtype===3? '破损还书' : '丢失图书'))) }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    </el-row>
    <el-row>
      <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="pageData.currentPage"
          :page-sizes="[4, 8, 12, 16]"
          :page-size=pageData.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageData.total">
      </el-pagination>
    </el-row>
  </el-card>
</div>
</template>

<script>

export default {
  name: "BorrowingRecord",
  data() {
    return {
      id:sessionStorage.getItem("id"),
      tableData: [],
      pageData:{
        currentPage:1,
        pageSize:4,
        total:0
      },
    }
  },
  created() {
    this.fetchReaderLendList();
  },
  methods: {
    async fetchReaderLendList() {
      try {
        const params = {...this.pageData, id: this.id};
        const { data: res } = await this.$axios.get("reader/getReaderLendList", { params });
        this.tableData = res.data.records;
        this.pageData.total = res.data.total;
      } catch (error) {
        console.error("获取借阅记录失败", error);
      }
    },
    currentChange(val){
      this.pageData.currentPage=val
      this.fetchReaderLendList()
    },
    sizeChange(val){
      this.pageData.pageSize=val
      this.fetchReaderLendList()
    },
    formatDate(dateString) {
      if (!dateString) {
        return '';
      }
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        timeZone: 'Asia/Shanghai',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });
    },
}
}
</script>

<style scoped>
.el-pagination{
  margin-top: 10px;
}
</style>